import Vue from 'vue'
import VueRouter from 'vue-router'


//引入组件
import Layout from '@/layout/Layout'
import Home from '@/views/home/Home'
import Lesson from '@/views/lesson/Lesson'
import Money from '@/views/money/Money'
import Order from '@/views/order/Order'
import Student from '@/views/student/Student'
import NotFound from '@/views/NotFound'
import Setup from "@/views/setup/Setup"

// 登录页
import login from '@/views/login/index'

import Cookie from "../utils/cookieUtils"
import store from "../store/index"


//注册路由
Vue.use(VueRouter)

//注册路由配置表
const routes = [
    {
        path: '/login',
        component: login //登录主页  
    },
    {
        path: '/',
        redirect: '/login' //重定向
    },
    {
        path: '*',
        component: NotFound  //万能匹配
    },
    //下面是二级路由
    {
        path: '/layout',
        name: 'layout',
        component: Layout,
        children: [
            {
                path: 'home',
                name: 'home',
                component: Home,
                meta: {
                    title: "首页中心", to: "/layout/home", rule: ["管理员", "用户"], icon: "icon-shouye",
                    color: "#ffa842",
                }
            },
            {
                path: 'student',
                name: 'student',
                component: Student,
                meta: {
                    title: "学员管理", to: "/layout/student", rule: ["管理员", "用户"], icon: "icon-zaiduxueyuan",
                    color: "#ffc142",
                }
            },
            {
                path: 'lesson',
                name: 'lesson',
                component: Lesson,
                meta: {
                    title: "课程管理", to: "/layout/lesson", rule: ["管理员", "用户"], icon: "icon-kechengbiao",
                    color: "#b8a4ff",
                }
            },
            {
                path: 'order',
                name: 'order',
                component: Order,
                meta: {
                    title: "订单管理", to: "/layout/order", rule: ["管理员", "用户"], icon: "icon-dingdan",
                    color: "#ffc142",
                }
            },
        ]
    }
]

//注册路由实例 将配置表挂载在实例里面
const router = new VueRouter({
    routes
})

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch((err) => err);
};

// 路由白名单
const whiteList = ["/login"];


// 权限路由
const limitRoute = [
    {
        path: 'money',
        name: 'money',
        component: Money,
        meta: {
            title: "财务管理", to: "/layout/Money", rule: ["管理员"], icon: "icon-caiwuguanli",
            color: "#ffa842",
        }
    },
    {
        path: "setup",
        name: "setup",
        component: Setup,
        meta: {
            title: "团队成员", to: "/layout/setup", rule: ["管理员"], icon: "icon-xitongshezhi",
            color: "orange",
        }
    }
]

// 筛选用户权限列表
function getRoutes(rule, limitRoute) {
    return limitRoute.filter(item => item.meta.rule.includes(rule))
}


// 权限
router.beforeEach((to, from, next) => {
    var path = to.path; // 获取要前往的页面的路由地址
    var token = Cookie.getToken("user");

    if (token) { // 如果存在token  进行用户权限判断
        next();
        if (whiteList.includes(path)) {
            next("/layout");  // 避免重复登录
        } else {
            // 判断vuex中是否有用户信息，例如权限路由列表
            if (store.state.routes.length === 0) { // 如果没有权限列表，则请求权限列表
                var userRoute = getRoutes(decodeURIComponent(Cookie.getToken("type")), limitRoute);
                routes[3].children = routes[3].children.concat(userRoute);
                store.commit("SetRoutes", routes);
                router.addRoutes(routes);
                console.log(routes);
                next({ ...to, replace: true });

            } else {
                next();
            }
        }

    } else { // 如果不存在token  进行白名单判断
        if (whiteList.includes(path)) {
            next(); // 如果前往的页面属于白名单  则放行
        } else {
            next("/login"); // 如果不属于白名单  则跳转到登录页面
        }
    }
})



//暴露路由实例 
export default router
